<template>
  <div class="m-contain productDetail">
    <!-- <van-nav-bar title="商品详情"
                 left-arrow
                 @click-left="onClickLeft" /> -->

    <div class="m-main relative">
      <img class="absolute-img-arrow"
           :src="require('@/assets/image/detailarrow.png')"
           @click="onClickLeft"
           width="30"
           alt="">
      <!-- banner-start -->
      <van-swipe class="my-swipe banner"
                 :autoplay="3000"
                 indicator-color="white">
        <van-swipe-item v-for="(item,index) in bannerList"
                        :key="index">
          <img :src="item.url"
               width="100%"
               alt="">
        </van-swipe-item>
      </van-swipe>
      <!-- banner-end -->
      <!-- <img :src="require('@/assets/image/productDetail/icon-1.png')"
           width="100%"
           alt=""> -->
      <p class="price"><img :src="require('@/assets/image/productDetail/icon-0.png')"
             alt="">
        <span>1200</span>
      </p>
      <p class="description">七匹狼正品新款钱包男士长款真皮青年头层牛皮长款钱夹男超薄商务皮夹 黑色</p>

      <div class="bottom">
        <div class="title">商品详情</div>
        <p class="description">精选环保材料，绝对无污染，可以放心使用。</p>
        <img :src="require('@/assets/image/productDetail/icon-2.png')"
             width="100%"
             alt="">
      </div>

    </div>

    <van-goods-action>
      <div class="tips tips-1"
           v-show="tips1">
        <img :src="require('@/assets/image/tip.png')"
             width="170"
             alt="">
      </div>
      <div class="tips tips-2"
           v-show="tips2">
        <img :src="require('@/assets/image/tip.png')"
             width="170"
             alt="">
      </div>
      <van-goods-action-button color="#FFBB00"
                               type="warning"
                               @click="changeTips1"
                               text="加入购物车" />
      <van-goods-action-button color="#E62B4B"
                               type="danger"
                               @click="changeTips2"
                               text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>

import Vue from 'vue';
import { NavBar, GoodsAction, GoodsActionIcon, GoodsActionButton, Swipe, SwipeItem } from 'vant';



Vue.use(NavBar);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Swipe);
Vue.use(SwipeItem);


export default {
  name: "login",
  data() {
    return {
      tips1: false,
      tips2: false,
      bannerList: [
        { url: require('@/assets/image/productDetail/icon-1.png'), path: '' },
        { url: require('@/assets/image/productDetail/icon-1.png'), path: '' },
        { url: require('@/assets/image/productDetail/icon-1.png'), path: '' }
      ],
    }
  },
  components: {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    changeTips1() {
      this.tips1 = this.tips1 ? false : true;
      this.tips2 = false;
    },
    changeTips2() {
      this.tips2 = this.tips2 ? false : true;
      this.tips1 = false;
    }
  }
}
</script>

<style lang="less" scoped>
.relative {
  position: relative;
}
.tips {
  position: absolute;
}
.tips-1 {
  top: -50px;
  left: 16px;
}
.tips-2 {
  top: -50px;
  right: 16px;
}
.absolute-img-arrow {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1111;
}
.pull-right {
  float: right;
}
.price {
  padding: 10px 15px;
  img {
    width: 18px;
    vertical-align: -2px;
  }
  span {
    font-size: 17px;
    color: #f21717;
    font-weight: bold;
  }
}
.description {
  font-size: 0.9375rem;
  color: #333333;
  font-weight: bold;
  line-height: 21px;
  padding: 0 0.9375rem;
}
.bottom {
  margin-top: 10px;
  padding: 0rem 0.9375rem 56px;
  border-top: 0.625rem solid #f6f6f6;
  .title {
    text-align: center;
    line-height: 2.5625rem;
    font-size: 0.9375rem;
    font-weight: bold;
    border-bottom: 1px solid #f6f6f6;
  }
  .description {
    margin-top: 14px;
    margin-bottom: 15px;
    padding: 0px;
    font-size: 12px;
    color: #333;
    line-height: 21px;
  }
}
.font-size-12 {
  font-size: 12px;
}
.van-goods-action-button--first {
  margin-left: 0px;
  border-radius: 0px;
}
.van-goods-action-button--last {
  margin-right: 0px;
  border-radius: 0px;
}
.van-goods-action-button {
  height: 50px;
}
</style>